<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-我的订单</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?=070302" />
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/swiper.min.css">
	</head>
	<style>
		.moreList{text-align: center;font-size:.72rem;color:#666;line-height:2.5rem;display: none;}
	</style>
	<body>
		<!-- 个人中心 --> 
		<div class="orderIndex">
			<div class="content">
				<div class="order_top">
					<!-- <div class="title flex juscbtween">
						<a href="javascript:history.go(-1);" class="flex alitemCenter"><img src="__TMPL__/home/public/assets/img/back.png" alt=""></a>
						<b>我的订单</b>
						<span></span>
					</div> -->
					<div class="order_tab flex juscbtween">
						<span value="" <if condition="$status eq ''">class="on"</if> >全部</span>
						<span value="1" <if condition="$status eq 1">class="on"</if> >待发货</span>
						<span value="2" <if condition="$status eq 2">class="on"</if> >待收货</span>
						<span value="4" <if condition="$status eq 4">class="on"</if> >已完成</span>
					</div>
				</div>
				<!-- 订单列表 -->
				<div class="order_list">
					<div class="thisList">
						<foreach name="list" item="vo">
							<div class="order_item" value="{$vo.order_id}">
								<div class="top flex juscbtween"><p>{$vo.add_time} 下单</p>
									<span>
										<if condition="$vo.status eq 1">
											待发货
										<elseif condition="$vo.status eq 2" />	
											待收货
										<elseif condition="$vo.status eq 3" />
											申请退款中	
										<elseif condition="$vo.status eq 4" />
											已完成	
										<elseif condition="$vo.status eq 5" />	
											已退款
										<else/>	
											错误状态
										</if>

									</span>

								</div>
								<div class="order_info flex juscbtween">
									<div class="order_img">
										<img src="{$vo.course.xt_logo}" alt="">
									</div>
									<div class="right flex flexdirection juscbtweenOnly">
										<h4 class="ellipsis">{$vo.title}</h4>
										<div class="money flex juscbtween">
											<div class="pay_money">
												<p><i>￥</i>{$vo.pay_money}</p>
												<span>付款金额</span>
											</div>
											<!--<div class="get_money">
												<p><i>￥</i>999</p>
												<span>预估收益</span>
											</div>-->
										</div>
									</div>
								</div>
							</div>
						</foreach>
					</div>
					<div class="moreList">正在加载</div>
				</div>
				<php>
				  $counts = count($list);
				  if($counts <= 0){
				</php>
					<div class="noHaveData">
						<img src="__TMPL__/home/public/assets/img/noHaveOrder.png" alt="">
						<p>暂无数据</p>
					</div>
				<php>}</php>
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){

			//状态选择
			$('.order_tab span').click(function(){
				var status = $(this).attr('value');
		    
		       window.location.href='/order?status='+status;
			})

			//订单详情
		    $('.order_item').click(function(){

		    	var id = $(this).attr('value');
		    	window.location.href='/order_details?order_id='+id;
                
		    })

		    //上拉加载
		    var pageNum = 1;
			$(window).scroll(function () {
			    //滚动条滚动时调用
			    var scrollTop = $(this).scrollTop(); //计算已经卷进去滚动条的的高度
			    var scrollHeight = $(document).height(); //当前页面的总高度
			    var windowHeight = $(this).height(); //当前window的高度
				var status = $('.order_tab .on').attr('value') || '';
			    if (scrollTop+3 + windowHeight >= scrollHeight) {
			    	$('.moreList').show();
			    	pageNum += 1;
				    $.ajax({
				      	url: '/get_order',
				      	type: 'post',
				      	data: {
				      		'page':pageNum,
				        	"status": status
				      	},
				      	success: function success(d) {
				      		if(d.code == 0){
					      		if(d.data){
					      			var htm = '';
					      			for(let i=0;i<d.data.length;i++){
					      				const item = d.data[i];
					      				htm += `
											<div class="order_item" value="`+item.order_id+`">
												<div class="top flex juscbtween"><p>`+item.add_time+` 下单</p>
													<span>`+(item.status==1?"待发货":item.status==2?"待收货":item.status==3?"申请退款中":item.status==4 ?"已完成":item.status==5?"已退款":"错误状态")+`
													</span>
												</div>
												<div class="order_info flex juscbtween">
													<div class="order_img">
														<img src="`+item.course.xt_logo+`" alt="">
													</div>
													<div class="right flex flexdirection juscbtweenOnly">
														<h4 class="ellipsis">`+item.course.title+`</h4>
														<div class="money flex juscbtween">
															<div class="pay_money">
																<p><i>￥</i>`+item.pay_money+`</p>
																<span>付款金额</span>
															</div>
															<!--<div class="get_money">
																<p><i>￥</i>999</p>
																<span>预估收益</span>
															</div>-->
														</div>
													</div>
												</div>
											</div>`;
					      			}
					      			$('.thisList').append(htm);
					      		}
				      		}
				      		$('.moreList').html('没有更多了')
				      	},
				      	error: function error(e) {
				        	console.log(e);
				      	}
				    })
			    }
			});
		})
	</script>
</html>
